<template>
	<upper-navigation> 新闻详情 </upper-navigation>
	<view id="news-detail">
		<view class="topic" v-html="page.data.Topic" />
		<view class="creat-by">
			<view class="creat-time" v-html="page.data.UpdatedOn" />
		</view>
		<view class="content">
			<rich-text :nodes="page.nodes" class="content"  @click="richTextClick(page.imgs)"></rich-text>
		</view>
	</view>
	<bottom-bar></bottom-bar>
</template>

<script setup>
	import upperNavigation from './upperNavigationBack.vue'
	import bottomBar from './bottomNavigationBar.vue'
	import backBtn from '../DigitalPlatform/back.vue'
	import { domain } from '../../stores/useApp.js'
	import { onLoad } from "@dcloudio/uni-app"
	import { reactive, onMounted,nextTick } from "vue";
	import parseHtmlData from '../DigitalPlatform/parseHtmlData.js'
	const page = reactive({
		uniqueCode: "",
		data: {},
		node: [],
		imgs: [],
	})
	onLoad((option) => {
		page.uniqueCode = option.uniqueCode;
		getData()
	})

	async function getData () {
		let url = `/api/articleSource?uniqueCode=${ page.uniqueCode }`;
		let msg = await uni.post(url);
		page.data = msg.data;
		let { nodes, imgs } = parseHtmlData(msg.data.Content);
		page.nodes = nodes;
		page.imgs = imgs;
	}
	
	function richTextClick (imgs) {
		if (imgs.length) {
			wx.previewImage({
				current: imgs[0], // 当前显示图片的http链接
				urls: imgs
			})
		}
	}
</script>

<style lang="less">
	.back-btn {
		background-color: rgba(0, 0, 0, 0.2);
	}
	#news-detail {
		padding: 0 30rpx;
		.topic {
			font-size: 45rpx;
			font-weight: bold;
			margin: 25rpx 0;
		}
		.creat-by {
			display: flex;
			color: #626262; 
			margin: 25rpx 0;
			.creat-author {
				margin-right: 20rpx;
			}
		}
		.content {
			width: 100%;
		}
	}
</style>